<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div
    class="page-content"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="finish"
    infinite-scroll-distance="16"
  >
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="profit">
        <div class="nav">
          <p>未读邮件</p>
          <p>
            <span>{{readmsg}}</span>
          </p>
        </div>
        <div class="nav">
          <button class="btn" @click="letter">发送邮件</button>
        </div>
      </div>

      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th>邮件状态</th>
            <th>邮件内容</th>
            <!-- <th>发件人</th> -->
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in dataList" :key="index">
            <td>{{item.isread == "yes"?"已读":"未读"}}</td>
            <td>{{item.title}}</td>
            <!-- <td>{{item.token}}</td> -->
            <td>{{item.create_time}}</td>
            <td @click="gotoDetail(item)">查看</td>
          </tr>
          <tr v-if="!dataList.length">
            <td colspan="4">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <!-- <v-table is-horizontal-resize style="width:100%" :columns="columns" :table-data="tableData"></v-table> -->
      <commonFooter></commonFooter>
    </van-pull-refresh>
  </div>
  <!-- </div> -->
</template>
<script>
import "vue-easytable/libs/themes-base/index.css";
import { commonFooter, tarbar } from "common";
import { getMsgApi } from "@/api/user";
import myMixin from "./listMixin";
import { createNamespacedHelpers } from "vuex";
let { mapState, mapActions } = createNamespacedHelpers("user");
export default {
  name: "recharge",
  components: {
    commonFooter,
    tarbar
  },
  mixins: [myMixin],
  methods: {
    ...mapActions(["GetBaseInfo"]),
    gotoDetail(item) {
      this.$router.push({
        path: "/user/getLetter",
        query: { token: item.token }
      });
    },
    letter() {
      this.$router.push({ path: "/user/letter" });
    }
  },
  computed: {
    ...mapState(["readmsg"])
  },
  mounted() {
    this.findList = getMsgApi;
    this.GetBaseInfo();
    // this.loadMore();
  },
  data() {
    return {
      title: "推广记录"
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
  font: 0.3rem/1.5 "Microsoft YaHei";
  color: #333;
  background: #fff;
  thead {
    background: #f6f4f5;
  }
  td,
  th {
    min-width: 0.2rem;
    border: 1px #ddd solid;
    max-width: 5rem;
    padding: 0.2rem 0;
    word-wrap: break-word;
    word-break: break-all;
  }
}

.profit {
  background: #fff;
  text-align: center;
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  .nav {
    flex: 1;
    font: 600 0.45rem/1.5 "Microsoft YaHei";
    color: #333;
    span {
      color: @orange-color;
      font: 600 0.6rem/1.5 "Microsoft YaHei";
    }
  }
  .btn {
    font: 500 0.4rem/1.5 "Microsoft YaHei";
    background-color: @base-color;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 0.2rem 0.6rem;
  }
}
/deep/ .van-pull-refresh {
  overflow: initial;
  min-height: 100%;
}
</style>